<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
    body {
        display: flex;
        justify-content: center;
        padding: 50px;
    }
    
    .btn {
        background-color: rgb(235, 74, 0);
        color: white;
        width: 120px;
        padding: 10px;
        text-align: center;
        border-radius: 20px;
        font-size: 20px;
        font-weight: bold;
        transition: all 0.5s;
        cursor: pointer;
        margin: 10px;
    }
    
    .btn:hover {
        background-color: brown;
    }
    
    #app {
        width: 100%;
        padding: 50px;
        border-radius: 10px;
        border: 1px solid rgb(0, 132, 194);
    }
    
    input[type=checkbox] {
        width: 0px;
    }
    
    input[type=radio] {
        width: 20px;
        height: 20px;
        appearance: none;
    }
    
    input[type=number] {
        outline: none;
        border: 0px;
        width: 60px;
        border-bottom: 3px solid black;
        font-weight: bold;
        text-align: center;
        font-size: 20px;
    }
    
    input[type=text] {
        outline: none;
        border: 0px;
        width: 60px;
        border-bottom: 3px solid black;
        font-weight: bold;
        text-align: center;
        font-size: 20px;
    }
    
    .meun {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .option {
        cursor: default;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100px;
        padding: 5px;
        padding-right: 7px;
        margin: 5px;
        font-weight: bold;
        color: rgb(0, 132, 194);
        border-radius: 10px;
        border: 1px solid rgb(0, 132, 194);
        transition: all 0.5s;
    }
    
    .option:hover {
        background-color: rgb(133, 216, 255);
    }
    
    .option-active {
        background-color: rgb(0, 132, 194);
        color: white;
    }
    
    .lang {
        display: flex;
        justify-content: center;
        padding: 10px;
    }
    
    .lang label {
        font-weight: bold;
    }
    
    .question {
        display: flex;
        justify-content: center;
        font-size: 50px;
        font-weight: bold;
    }
    
    .input {
        font-weight: bold;
        margin: 5px;
    }
    
    .tip {
        display: inline-block;
        font-size: 15px;
        color: rgb(177, 177, 177);
    }
</style>

<body>
    <div id="app">
        <div class="meun" v-if="!isBegin">
            <h2>{{text.pleaseChosenOption}}</h2>
            <div class="lang">
                <input type="radio" id="CHN" value="CHN" v-model="currentLanguage"><label for="CHN">中文   </label>
                <input type="radio" id="ENG" value="ENG" v-model="currentLanguage"><label for="ENG">English</label>
            </div>
            <div :class="operators.includes(item)? 'option option-active':'option'" v-for="item in option">
                <input type="checkbox" :id="item" :value="item" v-model=" operators">
                <label :for="item">{{optionText(item)}}</label>
            </div>
            <div :class="isIncludeFraction?'option option-active':'option'" @click="includeFraction">{{text.includeFraction}}</div>
            <div class="input">{{text.operatorNumber}} <input type="number" name="" id="" v-model="operatorNumber">
                <div class="tip">{{text.tip1}}</div>
            </div>
            <div class="input">{{text.MaxNumber}} <input type="number" name="" id="" v-model="maxNumber">
                <div class="tip">{{text.tip2}}</div>
            </div>
            <div class="btn" @click="begin">{{text.begin}}</div>
        </div>
        <div class="game" v-if="isBegin">
            <div class="score">{{text.score+score}}</div>
            <div class="time">{{text.time+time}}</div>
            <div class="question">{{question}}</div>
            <input type="text" class="anwser" @keyup.enter="submit" v-model="input">
        </div>


</body>
<script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                isBegin: false, //是否开始
                option: ["+", "-", "×", "÷"], //渲染运算符
                answer: 0, //答案
                operators: ["+", "-", "×", "÷"], //选择的，运算符
                time: 20, //倒计时
                question: "", //问题
                score: 0, //分数
                operatorNumber: 3, //运算符数量
                input: "",
                maxNumber: 100, //最大数
                isIncludeFraction: false, //是否包含分数


                CHN: {
                    pleaseChosenOption: "请选择运算类型",
                    Add: "加法",
                    Div: "除法",
                    Sub: "减法",
                    Mul: "乘法",
                    includeFraction: "分数运算",
                    begin: "开始",
                    score: "分数：",
                    time: "倒计时：",
                    operatorNumber: "运算符数量:",
                    MaxNumber: "最大数字:",
                    tip1: "2~5",
                    tip2: "1~1000"
                },
                ENG: {
                    pleaseChosenOption: "Please select calculation type",
                    Add: "Addition",
                    Div: "Subtraction",
                    Sub: "Division",
                    Mul: "Multiplication",
                    includeFraction: "Fraction",
                    begin: "Begin",
                    score: "Score:",
                    time: "Countdown:",
                    operatorNumber: "Max operator number:",
                    MaxNumber: "Max number:",
                    tip1: "2~5",
                    tip2: "1~1000"
                },
                currentLanguage: "CHN"
            }
        },
        methods: {
            submit() {

                if (eval(this.input) == this.answer) {
                    this.score += 5
                }
                this.createQuestion();
                this.input = ""
            },
            createQuestion() {

                let opera = [];
                let nums = [];
                nums.push(this.getRandomNum(0, ))

                //是否是分数
                let fraction = false;
                if (this.isIncludeFraction == true && this.getRandomNum(0, 2) == 1) {
                    fraction = true
                }

                //第一个数
                nums[0] = fraction ? this.getRandomFraction() : this.getRandomNum(1, this.maxNumber);

                //是否包含括号
                let brackets = -1
                if (this.getRandomNum(0, 2) == 1 && this.operatorNumber > 2) {
                    brackets = this.getRandomNum(0, this.operatorNumber - 2)

                }
                console.log(brackets);

                //生成符号与数
                for (let i = 0; i < this.operatorNumber - 1; i++) {
                    opera[i] = this.operators[this.getRandomNum(0, this.operators.length - 1)]
                    opera[i] = brackets == i ? "_" + opera[i] : opera[i]
                    nums[i + 1] = fraction ? this.getRandomFraction() : this.getRandomNum(1, this.maxNumber);

                }
                this.question = this.format(opera, nums);

                //this.question = eval("this.create" + this.operators[Math.floor(Math.random() * this.operators.length)] + "()")
            },

            includeFraction() {
                this.isIncludeFraction = !this.isIncludeFraction
            },
            format(operators, nums) {
                let question = [nums[0]]
                for (let index = 0; index < operators.length; index++) {
                    let element = operators[index];
                    if (element.charAt(0) == "_") {
                        element = element.slice(1, 2)
                        question.splice(question.length - 1, 0, "(")
                        question.push(element)
                        question.push(nums[index + 1])
                        question.push(")")

                    } else {
                        question.push(element)
                        question.push(nums[index + 1])
                    }
                }
                return question.join("");
            },


            optionText(item) {
                let lang = this.currentLanguage == "CHN" ? this.CHN : this.ENG

                if (item == "+") {
                    return lang.Add
                } else if (item == "-") {
                    return lang.Sub
                } else if (item == "÷") {
                    return lang.Div
                } else {
                    return lang.Mul
                }

            },
            begin() {
                this.isBegin = true;
                this.createQuestion();
                this.timeLoop();
            },
            timeLoop() {
                this.timer = setInterval(() => {
                    this.time--
                        if (this.time <= 0) {
                            this.time = 20
                            this.createQuestion();
                        }
                    if (this.isBegin) {
                        clearInterval(this.timer)
                    }
                    this.timeLoop()
                }, 1000)
            },

            getRandomNum(Max, Min) {
                let NumRange = Max - Min;
                let a = Math.random(); // 取随机数 0.0-1.0
                // 取范围内的整数
                let x = Min + Math.round(a * NumRange); // +Min 确保最小值
                return x;
            },
            getRandomFraction(Max, Min) {
                let n1s = this.getRandomNum(1, 10)
                let n1m = this.getRandomNum(1, 10)
                n1s = n1m === n1s ? n1s - 1 : n1s
                return n1s + "/" + n1m
            }


        },
        computed: {
            text() {
                return this.currentLanguage == "CHN" ? this.CHN : this.ENG
            },

        },
        watch: {
            operatorNumber(_new, old) {
                if (_new > 5) {
                    this.operatorNumber = 5
                } else if (_new < 2) {
                    this.operatorNumber = 2
                }
            },
            maxNumber(_new, old) {
                if (_new > 1000) {
                    this.maxNumber = 1000
                } else if (_new < 0) {
                    this.maxNumber = 1
                }
            }
        }

    })
</script>

</html>